<!DOCTYPE html>
<html style="">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/goods/chaozhipintuan.css" />
		<script type="text/javascript">
			(function() {
				var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
				clientWidth = clientWidth || localStorage.getItem("clientWidth")
				if(clientWidth > 750)
					clientWidth = 750;
				document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
			})();
		</script>
		<!--<script>
			var h5pullDown = true;
		</script>-->
		<style type="text/css">
			html,
			body {
				padding: 0;
				overflow: hidden;
			}
			
			.mui-pull-bottom-pocket {
				margin-bottom: 50px;
			}
		</style>
	</head>

	<body style="">
		
		<div id="pullrefresh" class=" mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<div class="mui-content" style="padding-top: 0;">
					<div class="youhui_search">
						<input type="search" v-model="pintuan_kw" @keyup="search_fun(event)" placeholder="请输入商品名称搜索...">
						<i class="mui-icon mui-icon-closeempty" @click="clear_input()"></i>
					</div>

					<div class="search-group-list">

						<div class="item" @click="go_detail(i.goodsid,i.sid)" v-for="i in goods_list">
							<div class="img fl">
								<img :src="i.pic " style="height: 100%;" alt="">
							</div>
							<div class="info fl">
								<span class="title"><span   class="title_text"> {{i.name}}</span><span class="fr sale_num">销量：{{i.sales}}</span></span>
								<span class="des"> </span>
								<div class="bottom">
									<div class="price"> 
										<span class="old_price"> <del>￥{{i.min_price}}</del> </span><br>
										<span class="sale_price">￥{{i.money}}</span>
									</div>
									<!--<span class="fr btn_pintuan" @click="go_detail(i.sid)" v-if="i.as">立即拼团</span>-->
									<span class="fr btn_pintuan" @click="go_detail(i.sid)">立即拼团</span>
									<!--<span class="fr btn_pintuan" v-if="!i.as" style="background: #aaa !important;" >拼团已结束</span>-->
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		var app = new Vue({
			el: '.mui-content',
			data: {
				goods_list: '', //页面显示数据
				old_goods_list: '', //原始数据
				has_more_data: true,
				pintuan_kw: '' //搜索关键字
			},
			methods: {
				clear_input: function(id) {
					//清空搜索栏内容
					this.pintuan_kw = "";
				},
				search_fun: function(e) {
					// 超值拼团的键盘搜索
					if(e.keyCode == 13) {
						var goods = [];
						for(var i = 0; i < this.old_goods_list.length; i++) {
							if(this.old_goods_list[i].name.indexOf(this.pintuan_kw) != -1) {
								goods.push(this.old_goods_list[i])
							}
						}
						this.goods_list = goods;
						document.activeElement.blur();
					}

				},
				go_detail: function(goodsid,sid) {
					util.log('goodsid-->'+goodsid)
					util.log('sid-->'+sid)
					mui.openWindow('goods_detail.html?goodsid=' + goodsid+'&sid='+sid, 'goods_detail.html')
				}
			},
			mounted: function() {
				var that = this;
				get_data(function(res) {
					that.goods_list = res;
					that.old_goods_list = res;
					tap_init();
				})

				mui_init()
			}
		})

		//初始化页面
		function mui_init() {
			// 初始化页面
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
		}
		//获取拼团商品列表数据
		function get_data(cb) {
			var address = localStorage.getItem("address");
			console.log(address)
			if(address){
				address =  JSON.parse(address);
			}
			$.ajax({
				type: "get",
				url: host_config.app_server + "/spell/alist",
				async: true,
				data: {
					bid: address.sqid
				},
				success: function(res) {

					res = JSON.parse(res)
					console.log(JSON.stringify(res));
					cb(res.data)
				},
				error: function(err) {
					console.log(err)

				}
			});
		}

		function tap_init() {
			//解决在sroll中 原生click事件失效
			function click() {
				this.click();
			}
			mui(".search-group-list").on('tap', '.item', click)
			mui(".youhui_search").on('tap', '.mui-icon-closeempty', click)

		}
		// 下拉刷新 
		function pulldownRefresh() {

			setTimeout(function() {

				get_data(function(res) {
					app.goods_list = res;
					app.old_goods_list = res;
					app.pintuan_kw = "";
					tap_init();
				})

				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新完成
			}, 1000);
		}

		// 上啦加载，暂无分页
		function pullupRefresh() {
			setTimeout(function() {
				// 调用vue实例中的获取更多数据
				//					app.get_more_data();
				//如果 has_more_data 为false 则表示没有数据了 则调用endPullupToRefresh
				mui('#pullrefresh').pullRefresh().endPullupToRefresh("1"); //参数为true代表没有更多数据了。

			}, 1000);
		}
	</script>

</html>